<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<form action="#">
    <input type="hidden"  name="stuId" id="stuId" th:field="*{stuId}"> <!--value="${stuId}"-->
    名称:<input type="text" name="stuName" id="stuName"><br>

    性别:
    男: <input type="radio" name="sex" id="sex" value="M" checked />
    女:<input type="radio" name="sex" value="F"/><br>

    出生日期: <input type="text" name="birthday" id="birthday"><br>
    区域:

    省<select id="sheng" name="provincesId">
    <option value="">请选择省</option>
</select>

    市<select id="shi" name="citiesId">
    <option value="">请选择市</option>
</select>

    县<select id="xian" name="areasId">
    <option value="">请选择县</option>
</select>

    <br>


    <input type="button" value="保存" onclick="updateStudent()"/>
    <input type="button" value="返回" onclick="history.back(-1)"/>

</form>

<script type="text/javascript" th:src="@{/static/libs/jquery/jquery-3.5.1.js}"></script>
<script type="text/javascript">

    function  getYMDHMS (timestamp) {
        let time = new Date(timestamp)
        let year = time.getFullYear()
        const month = (time.getMonth() + 1).toString().padStart(2, '0')
        const date = (time.getDate()).toString().padStart(2, '0')
        const hours = (time.getHours()).toString().padStart(2, '0')
        const minute = (time.getMinutes()).toString().padStart(2, '0')
        const second = (time.getSeconds()).toString().padStart(2, '0')

        return year + '-' + month + '-' + date
    }

    $.ajax({
        type:'post',
        url:'/provinces',
        contentType:'application/json;charset=utf-8',
        dataType:'json',
        success(data){
            var sheng2 =""
            for (var i=0;i<data.p.length;i++){
                sheng2 += "<option value="+data.p[i].provinceid+">"+data.p[i].province+"</option>";
            }                                        /*provinceid省id    province省名称 */
            $("#sheng").append(sheng2)
            /* append() 方法在被选元素的结尾（仍然在内部）插入指定内容。*/
        },
        error(){
        }
    })


    /*当元素的值改变时发生 change 事件*/
    $("#sheng").change(function (){
        var sheng3=$("#sheng").val() /*val() 方法返回或设置被选元素的值。*/
        $("#shi").empty()
        $("#xian").empty() /* empty:清除 */
        $.ajax({
            type:'post',
            url:'/provinces',
            contentType:'application/json;charset=utf-8',
            dataType:'json',
            success(data) {
                var shi3="<option value='0'>请选择</option>"
                var xian3="<option value='0'>请选择</option>" /* xian3为了显示一个请选择*/

                for (var i = 0;i<data.c.length;i++){
                    if (sheng3 == data.c[i].provinceid) {
                        shi3 += " <option value="+data.c[i].cityid+">"+data.c[i].city + "</option>"
                    }
                }
                $("#shi").append(shi3)
                $("#xian").append(xian3)
                /* append() 方法在被选元素的结尾（仍然在内部）插入指定内容。*/
            },error() {
            }
        })
    })


    $("#shi").change(function (){
        var shi4 =$("#shi option:selected ").val();
        $("#xian").empty()
        $.ajax({
            type:'post',
            url:'/provinces',
            contentType:'application/json;charset=utf-8',
            dataType:'json',
            success :function(data){
                var xian =""
                for (var i = 0;i<data.a.length;i++){
                    if (shi4 == data.a[i].cityid) {
                        xian += " <option value="+data.a[i].areaid+">"+data.a[i].area + "</option>"
                    }
                }
                $("#xian").append(xian);
            }, error(){
            }
        })

    })


    /*------------------------------------------------------------------------*/




    function updateStudent (){

        var stuId = $("#stuId").val();
        var stuName = $("#stuName").val();
        var sex = $("input[name='sex']:checked").val();
        var birthday= $("#birthday").val();
        var provincesId=$("#sheng").val();
        var citiesId=$("#shi").val();
        var areasId=$("#xian").val();

        var student = {
            "stuId":stuId,
            "stuName":stuName,
            "sex":sex,
            "birthday":birthday,
            "provincesId":provincesId,
            "citiesId":citiesId,
            "areasId":areasId,
        }

        //2提交servlet   ajax
        $.ajax({
            type:"post",
            url:"/updateStudent",
            data:JSON.stringify(student),
            contentType: "application/json;charset=UTF-8",//指定消息请求类型
            success:function(m){
                if(m>0){
                    alert("修改信息成功！")
                    window.location.href="/success.html";
                }else{
                    alert("修改失败");
                }
            },
            error:function(e){
                alert("请求错误")
            }
        })


    }


    /*    ------------------------------------------------------------*/

        /*修改的回显*/
    var stuId = $("#stuId").val();
    var json={"stuId":stuId};

    $(function (){


        $.ajax({
            type:"post",
            url:"/updateById1",
            data:JSON.stringify(json),
            dataType:"json",
            contentType: "application/json;charset=UTF-8",//指定消息请求类型
            success:function(m){

                $("#stuName").val(m.an.stuName);

                if(m.an.sex=='M'){
                    $("input:radio[value='M']").prop('checked', true);
                }
                else {
                    $("input:radio[value='F']").prop('checked', true);
                }

                $("#birthday").val(getYMDHMS(m.an.birthday));
                $("#sheng").val(m.an.provincesId)
                $("#shi").val(m.an.citiesId)
                $("#xian").val(m.an.areasId)

            },
            error:function(e){
                alert("请求错误");
            }


        })
    })


</script>








</body>
</html>